<template>
  <div>
    <el-button type="primary" style="margin-bottom:10px" @click="addRow">
      新增分类
    </el-button>
    <el-dialog :title="id ? '修改分类' : '新增分类'"  v-model="dialogVisible" :before-close="handleBeforeClose">
      <CategoryEdit ref="categoryForm" :id="id" @success = "editSuccess"></CategoryEdit>
    </el-dialog>
    <!-- 分类管理 -->
    <el-table ref="tableRef" :data="tableData" style="margin-bottom:20px" row-key="id" border default-expand-all>
        <el-table-column prop="name" label="分类名称" sortable>
          
        </el-table-column>
        <el-table-column label="分类级别">
          <template #default = "{row}">
            <span v-if="row.pid === 0">一级分类</span>
            <span v-else>二级分类</span>
          </template>
        </el-table-column>
        <el-table-column label="分类编号" prop="id">

        </el-table-column>
        <el-table-column label="分类图片">
          <template #default="{row}">
            <el-image v-if="row.picture != ''" :src="row.picture" fit="contain" style="display:flex;align-items:center;height:60px" ></el-image>
            <el-image v-else></el-image>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="{row}">
            <el-button type="warning" @click="editRow(row)">
              编辑
            </el-button>
            <el-button type="danger" @click="delRow(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import { getCategoryList,delCategory } from '../../api';
import { ElMessageBox,ElMessage } from 'element-plus';
import CategoryEdit from '../../components/CategoryEdit.vue';
const tableData =ref([])
const dialogVisible = ref(false)
const id = ref(0)
const categoryForm = ref()
onMounted(()=>{
  loadCategoryList()
})

const loadCategoryList = async ()=>{
  const data = await getCategoryList()
  tableData.value = convertToTree(data)
}

const editSuccess = ()=>{
  loadCategoryList()
  dialogVisible.value = false
}


const convertToTree = data =>{
  const treeData = []
  const map = []
  for(const item of data){
    map[item.id] = {...item,children:[]}
  }
  for(const item of data){
    const node = map[item.id]
    if(item.pid === 0){
      treeData.push(node)
    }else{
      const parent = map[item.pid]
      parent.children.push(node)
    }
  }
  return treeData
}


const addRow = ()=>{
  if(categoryForm.value){
    categoryForm.value.resetForm(0)
  }
  id.value = 0
  dialogVisible.value=true
}
const editRow = (row)=>{
  if(categoryForm.value){
    categoryForm.value.resetForm(row.id)
  }
  id.value = row.id
  dialogVisible.value = true
}

const delRow = (row)=>{
  if(row.pid == 0 && row.children.length!=0){
    ElMessage({
      type:'warning',
      message:'该分类下存在二级分类，请先删除二级分类在删除此分类'
    })
  }else{
    ElMessageBox.confirm('确认要删除此分类吗?',{
      closeOnClickModal:false,
      confirmButtonText:'确定',
      cancelButtonText:'取消'
    }).then(async ()=>{
      if(await delCategory({id:row.id})){
        loadCategoryList()
      }
    }).catch(()=>{

    })
  }
}
const handleBeforeClose = ()=>{
  ElMessageBox.confirm('确定关闭对话框吗？',{
    showClose:false,
    closeOnClickModal:false,
    confirmButtonText:'确认',
    cancelButtonText:'取消',
  }).then(()=>{
    dialogVisible.value = false
  }).catch(()=>{

  })
}
</script>

